<template>
  <section class="search_container">
      <HeaderTop :goBack="true" :headTitle="'搜索'"></HeaderTop>
      <form class="search_form" @click.prevent >
          <section class="form_wrapper">
            <input class="input" v-model="searchText" type="text" placeholder="请输入商家或者美食名称" required>
            <input class="submit" type="submit" value="提交" @click="submitSearch">
          </section>
      </form>
      <section v-show="restaurantList.length">搜索结果列表</section>
      <section v-show="historyList.length && restaurantList.length===0" class="search_history">
          <h4>搜索历史</h4>
          <ul class="history_ul">
              <li v-for="(item,index) in historyList" :key="index" class="history_li"
                @click="replaceSearchText(item)">
                <span>{{item}}</span>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="delete_icon" @click.stop="deleteHistory(index)">
                    <line x1="8" y1="8" x2="18" y2="18" style="stroke:#999;stroke-width:3" />
                    <line x1="18" y1="8" x2="8" y2="18" style="stroke:#999;stroke-width:3" />
                </svg>
              </li>
          </ul>
          <footer class="clear_history" @click="clearHistory">清空所有历史</footer>
      </section>
      <FooterGuide></FooterGuide>
  </section>
</template>

<script>
import HeaderTop from '../../components/header/HeaderTop'
import FooterGuide from '../../components/footer/FootGuide'
import {searchRestaurant} from '../../api/getData'
import {getFoodHistory,setFoodhHistory,removeFoodHistory} from '../../utils/searchHistory'
export default {
    components:{
        HeaderTop,
        FooterGuide
    },
    data(){
        return {
            searchText:'', //搜索 文本
            restaurantList:[], // 搜索结果列表
            historyList:[], // 搜索历史列表
            geohash:'', // 定位
        }
    },
    mounted(){
        this.geohash = this.$route.query.geohash;
        // 加载 搜索历史数据
        this.historyList = getFoodHistory();
    },
    methods:{
        async submitSearch(){
            let text = this.searchText.trim();
            if(!text){ return }
            let hasItem = this.historyList.some(item=>{
                return item === text
            });
            if(!hasItem){
                this.historyList.push(text);   
                setFoodhHistory(text);
            }
            //请求商铺/美食
            let res = await searchRestaurant(this.geohash,text);
            console.log(res);
        },
        replaceSearchText(text){
            this.searchText=text;
        },  
        deleteHistory(idx){
            this.historyList.splice(idx,1);
            setFoodhHistory(this.historyList,true);
        },
        clearHistory(){
            this.historyList=[];
            removeFoodHistory();
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.search_container{
    padding-bottom: 2rem;
    .search_form{
        padding-top:2rem;
        background: #fff;
        .form_wrapper{
            padding: 0.5rem;
            display: flex;
            .input{
                color: #333;
                flex: 4;
                border: 0.025rem solid $bc;
                font-weight: bold;
                font-size: 0.65rem;
                background: #f2f2f2;
                margin-right: 0.25rem;
                height: 1.5rem;
                border-radius: 0.25rem;
                padding: 0 0.25rem;
                &::placeholder{
                    color: #999;
                }
            }
            .submit{
                flex: 1;
                background: $blue;
                @include sc(0.65rem,#fff);
                height: 1.5rem;
                border-radius: 0.25rem;
                border: 0.025rem solid $blue;
                padding: 0 0.25rem;
                font-weight: bold;
            }
        }
    }
}
.search_history{
    h4{
        @include sc(0.6rem,#666);
        line-height: 2rem;
        text-indent: 0.5rem;
        font-weight: bold;
    }
    .history_ul{
        background: #fff;
        .history_li{
            @include fj;
            align-items: center;
            padding: 0 0.3rem;
            border-bottom: 0.025rem solid $bc;
            @include font(0.7rem,2rem,'Microsoft YaHei');
            .delete_icon{
                @include wh(1rem,1rem);
            }
        }
    }
    .clear_history{
        line-height: 2rem;
        @include fj(center);
        align-items: center;
        @include font(0.7rem,2rem,'Microsoft YaHei');
        color: $blue;
        font-weight: bold;
        background: #fff;
    }
}
</style>